<template>
    <div class="box">
        <div class="box-t">
            <ul class="box-ul tanxin">
                <li>入驻歌手</li>
                <li>查看全部 &gt;</li>
            </ul>
        </div>
        <div class="box-c">
            <ul class="box-ul-ul">
                <li v-for="item in singer" :key="item.id" class="tanxin">
                    <img height="62" :src="item.img1v1Url" alt="">
                    <p>{{item.name}}</p>
                </li>
            </ul>
            <div class="box-c-b">申请成为网易音乐人</div>
        </div>
    </div>
</template>

<script>
import { singerApi } from '@/request/api';
export default {
    data () {
        return {
            singer:[]
        }
    },
    created() {
        singerApi().then(res => {
            if (res.data.code === 200) {
                // console.log(res);
                this.singer = res.data.list.artists.slice(0, 5);
                console.log(this.singer);
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.box{
    background-color: #fff !important;
    .box-t{
        border-bottom: 1px solid #ccc;
        height: 40px;
        margin-bottom: 20px;
        .box-ul {
            justify-content: space-between;
            li{
                line-height: 40px;
            }
        }
    }
    .box-c{
        .box-ul-ul{
            li{
                height: 65px;
                background-color: #e8e8e8;
                margin-bottom: 10px;
                p{
                    margin-left: 20px;
                }
            }
        }
        .box-c-b{
            width: 100%;
            height: 32px;
            background:-webkit-linear-gradient(top,#fff,#e8e8e8);
            text-align: center;
            line-height: 32px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    }
}
</style>